<script setup lang="ts">
// 整网业绩增长趋势
import { storeToRefs } from 'pinia'
import { reactive, ref, watch } from 'vue'
import EchartLine from '@/components/Echart/brokenLineGraph/GraphLineChart.vue'
import { useDealerDataStore } from '@/stores/module/dealerData'
import { DEFAULT_ECHARTS_FONTSIZE } from '@/Utils/setting'

const fontSize = DEFAULT_ECHARTS_FONTSIZE
const dealerStore = useDealerDataStore()
const { dealerNetworkGrowthTrend } = storeToRefs(dealerStore) //接口数据

//遍历接口数据拿到想要的数据
const getAreaName = () => {
  const areaName = []
  dealerNetworkGrowthTrend.value?.info?.list?.forEach((item) => {
    areaName.push(item.interval)
  })
  return areaName
}
//遍历接口数据拿到想要的数据
const getAreaPerformance = () => {
  const areaPerformance = []
  dealerNetworkGrowthTrend.value?.info?.list?.forEach((item) => {
    areaPerformance.push(item.performance)
  })
  return areaPerformance
}

const getAreaBonus = () => {
  const areaBonus = []
  dealerNetworkGrowthTrend.value?.info?.list?.forEach((item) => {
    areaBonus.push(item.bonus)
  })
  return areaBonus
}
const bonus = dealerNetworkGrowthTrend.value.info.bonus
const performance = dealerNetworkGrowthTrend.value.info.performance
const bonusy = dealerNetworkGrowthTrend.value.info.bonusy
const performancey = dealerNetworkGrowthTrend.value.info.performancey

// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}
const chartData = reactive({
  name: 'dealerLine',
  legend: {
    bottom: '0',
    itemWidth: changePixelSize(7.2),
    itemHeight: changePixelSize(10.5),
    textStyle: {
      fontSize: changePixelSize(fontSize),
      lineHeight: changePixelSize(15),
      color: '#fff',
    },
    data: [bonus, performance],
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '15%',
    top: '20%',
    containLabel: true,
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: getAreaName(),
    axisLabel: {
      color: '#fff', // 设置 X 轴标签字体颜色

      interval: 0, // 强制显示所有标签
      fontSize: changePixelSize(fontSize),
      margin: changePixelSize(5), // 调整标签与轴线的距离
    },
  },
  yAxis: [
    {
      type: 'value',
      name: bonusy,
      // nameLocation: 'center',
      nameTextStyle: {
        color: '#fff',
        // verticalAlign: 'bottom',
        // align: 'left',
        // padding: [changePixelSize(25), changePixelSize(20)],
        fontSize: changePixelSize(fontSize),
      },
      splitLine: {
        lineStyle: {
          color: '#123545',
          type: 'dashed',
        },
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        fontSize: changePixelSize(fontSize),
        color: '#08ffff',
        margin: changePixelSize(5),
      },
    },
    {
      type: 'value',
      name: performancey,
      // nameLocation: 'center',
      nameTextStyle: {
        color: '#fff',
        // verticalAlign: 'top',
        align: 'right',
        padding: [changePixelSize(0), changePixelSize(-30)],
        fontSize: changePixelSize(fontSize),
      },
      splitLine: {
        lineStyle: {
          color: '#123545',
          type: 'dashed',
        },
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        fontSize: changePixelSize(fontSize),
        color: '#08ffff',
        margin: changePixelSize(5),
      },
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      show: false,
      xAxisIndex: [0],
      zoomOnMouseWheel: false, // 禁止鼠标滚轮缩放
      moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
      moveOnMouseMove: true, // 开启鼠标移动窗口平移
      start: 0,
      end: changePixelSize(50),

      showDataShadow: false,

      textStyle: {
        color: '#ccd7d7',
      },
    },
  ],
  series: [
    {
      name: bonus,
      type: 'line',
      yAxisIndex: 0, // 将该数据绑定到第一个Y轴上
      data: getAreaBonus(),
      smooth: true,
      symbol: 'circle',
      symbolSize: changePixelSize(7),
      itemStyle: {
        color: '#077eef',
      },
      lineStyle: {
        color: '#077eef',
      },
    },
    {
      name: performance,
      type: 'line',
      yAxisIndex: 1, // 将该数据绑定到第二个Y轴上
      data: getAreaPerformance(),
      smooth: true,
      symbol: 'circle',
      symbolSize: changePixelSize(7),
      itemStyle: {
        color: '#fa9c3a',
      },
      lineStyle: {
        color: '#fa9c3a',
      },
    },
  ],
})
watch(
  () => dealerNetworkGrowthTrend.value,
  () => {
    const bonus = dealerNetworkGrowthTrend.value.info.bonus
    const performance = dealerNetworkGrowthTrend.value.info.performance
    const bonusy = dealerNetworkGrowthTrend.value.info.bonusy
    const performancey = dealerNetworkGrowthTrend.value.info.performancey

    // 更新图表数据
    chartData.legend.data = [bonus, performance]
    chartData.series[0].name = bonus
    chartData.series[1].name = performance
    chartData.yAxis[0].name = bonusy
    chartData.yAxis[1].name = performancey
    chartData.xAxis.data = getAreaName()
    chartData.series[0].data = getAreaBonus()
    chartData.series[1].data = getAreaPerformance()
  }
)
</script>
<template>
  <card-box>
    <template v-slot:title>
      <h1>{{ dealerNetworkGrowthTrend.title }}</h1>
    </template>
    <EchartLine
      :chart-data="chartData"
      v-if="dealerNetworkGrowthTrend.info?.list?.length"
    />
    <div class="NoPlanYet-box" v-else>
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.NoPlanYet-box {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/NoPlanYet-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183px 165px;

  font-size: 16px;
  color: #00f6ff;
  p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
